<link rel="stylesheet" href="/static/css/fileinput.css">

<form method=“post” role="form" style='padding: 0px;'>
    <div class="panel">
        <div class="panel-body" style="margin:-5px;">
            <table class="table  dataTable table-bordered table-hover table-striped text-nowrap "
                   id="dataTableDelivery">
                <thead>
                <tr>
                    <th style="">顺&nbsp;序</th>
                    <th style="width: 100px;">配送中心</th>
                    <th style="width: 100px;">经度</th>
                    <th style="width: 100px;">纬度</th>
                    <th style="width: 100px;">操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</form>
<div class="modal-footer">
    <a class="btn btn-success" data-dismiss="modal" href="#" onclick="query()">确认</a>
    <a class="btn btn-default" data-dismiss="modal" href="#">取消</a>
</div>
<script src="/static/js/fileinput.js"></script>

<script type="text/javascript">
    $(function () {
        $table = $('#dataTableDelivery').DataTable($.po('dataTable', {
            "bAutoWidth": false,
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "columns": [
                {"data":"id"},
                {"data": "name"},
                {
                    "data": "coordinateX",

                },
                {"data": "coordinateY"},
                { "data": null, "title":"操作","defaultContent": "<button class='edit-btn btn btn-sm btn-primary' type='button'>编辑</button>"}

            ],
            "columnDefs": [{
                "render": function (data, type, row) {
                    if(data.length>6){
                        return data.substring(0,4)+"..";
                    }
                    return data;
                },
                "targets": 1
            }
            ],
            "dom": '<"dt-dom-toolbar">rt<"bottom"pi>',
            "fnServerData": function (sSource, aoData, fnCallback) {
                var params = [
                    {name: "size", value: aoData[4].value}, {
                        name: "current", value: aoData[3].value / aoData[4].value + 1
                    }];
                var batchId = $("#batchId").val();
                if (batchId) {
                    params.push({name: 'batchId', value: batchId});
                }
                $.ajax({
                    "dataType": 'json',
                    "type": "post",
                    "data":params,
                    "url": "/network/supply/delivery/getData",
                    "success": fnCallback
                });
            }
        }));
        function reloadData() {
            $table.ajax.reload();
        };
        var table=$("#dataTableDelivery").DataTable();
        $("#dataTableDelivery tbody").on("click",".edit-btn",function(){//给tr或者td添加click事件
           var tds=$(this).parents("tr").children();
            $.each(tds,function (i,val) {
                var jqob=$(val);
                if(i<2||i>3){
                    return true;
                }
                var txt=jqob.text();
                var put=$("<input type='text' class='form-control' style='width: 100px'>");
                put.val(txt);
                jqob.html(put);
            });
            $(this).html("保存");
            $(this).toggleClass("edit-btn");
            $(this).toggleClass("save-btn");
        })
        $("#dataTableDelivery tbody").on("click",".save-btn",function(){
            var row=table.row($(this).parents("tr"));
            var tds=$(this).parents("tr").children();
            var tds1=$(this).parents("tr").data();
            var pms=",";
            $.each(tds, function(i,val){
                var jqob=$(val);
                //把input变为字符串
                if(!jqob.has('button').length){
                    var txt=jqob.children("input").val();
                    jqob.html(txt);
                    table.cell(jqob).data(txt);//修改DataTables对象的数据
                }
               pms=pms+jqob.text()+",";
            });
            $.ajax({
                "url":"/network/supply/delivery/updateData1",
                "data":{"pm":pms},
                "type":"post",
                "error":function(){
                    alert("服务器未正常响应，请重试");
                },
                "success":function(response){
                    toastr.success("保存成功!");
                }
            });
            $(this).html("编辑");
            $(this).toggleClass("edit-btn");
            $(this).toggleClass("save-btn");
        });




    });



</script>